import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';

<Meta
  title="Components/Separator"
/>

export const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Btn },
  template: '<Btn :variant="variant" :size="size" :icon="icon" :iconPos="iconPos" :label="label" />',
});

# Separator

## Example

A separator is an horizonal line, helping to separate content visually.

## Default Separator

<Canvas>
<div>
  <div>Content above</div>
  <hr class="separator sperator--negative" />
  <div>Content below</div>
</div>
</Canvas>

## Separator with spacings

<Canvas>
<div>
  <div>Content above</div>
  <hr class="separator separator--xl" />
  <div>Content below</div>
</div>
</Canvas>

## Negative Separator

<Canvas style={{ backgroundColor: '#2f4356' }}>
<div class="text--negative">
  <div>Content above</div>
  <hr class="separator sperator--negative" />
  <div>Content below</div>
</div>
</Canvas>
